<template>
    <div style="width: 100%">
        <el-collapse v-model="activeName">
            <el-collapse-item :name="1" title="基本信息">
                <el-form size="small" :disabled="disabled" ref="form" :model="formData" label-width="100px"
                         :rules="rules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="中文名称" prop="nameCn">
                                <el-input v-model="formData.nameCn"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="编码标识" prop="name">
                                <el-input :disabled="dialogType!=='add'" v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="英文名称">
                                <el-input v-model="formData.nameEn"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="英文描述">
                                <el-input v-model="formData.describeEn"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="中文描述" prop="describeCn">
                                <el-input v-model="formData.describeCn"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-collapse-item>
            <el-collapse-item :name="2" title="版本规则配置">
                <div class="config">
                    <el-col :span="2">大版本：</el-col>
                    <el-col :span="8">
                        <span>前缀</span>
                        <el-input :disabled="disabled" size="small" v-model="formData.majorPrefix"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <span class="l4">自增初值</span>
                        <el-select :disabled="disabled" size="small" v-model="formData.majorIdentityProperty">
                            <el-option :value="1" label="字母序列"></el-option>
                            <el-option :value="2" label="数字序列"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <span>后缀</span>
                        <el-input :disabled="disabled" size="small" v-model="formData.majorSuffix"></el-input>
                    </el-col>

                    <el-col :span="2">分隔符：</el-col>
                    <el-col :span="22">
                        <el-select :disabled="disabled" size="small" v-model="formData.separatorRule">
                            <el-option value="_" label="_"></el-option>
                            <el-option value="-" label="-"></el-option>
                            <el-option value="." label="."></el-option>
                            <el-option value="~" label="~"></el-option>
                        </el-select>
                    </el-col>

                    <el-col :span="2">小版本：</el-col>
                    <el-col :span="8">
                        <span>前缀</span>
                        <el-input :disabled="disabled" size="small" v-model="formData.minorPrefix"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <span class="l4">自增初值</span>
                        <el-select :disabled="disabled" size="small"
                                   v-model="formData.minorIdentityProperty">
                            <el-option :value="1" label="字母序列"></el-option>
                            <el-option :value="2" label="数字序列"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <span>后缀</span>
                        <el-input :disabled="disabled" size="small" v-model="formData.minorSuffix"></el-input>
                    </el-col>
                </div>
            </el-collapse-item>
        </el-collapse>

        <div class="md-component-btns">
            <el-button size="medium" v-if="!disabled" type="primary" @click="save">保存</el-button>
            <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
        </div>
    </div>
</template>
<script>

import * as api from "@/api/settingManage/versionRules";

export default {
    name: "versionRulesTemp",
    data() {
        return {
            activeName: [1, 2],
            formData: {
                name: "",
                nameCn: "",
                nameEn: "",
                describeEn: "",
                describeCn: "",

                separatorRule: "",

                majorPrefix: "",
                majorSuffix: "",
                majorIdentityProperty: "",

                minorPrefix: "",
                minorSuffix: "",
                minorIdentityProperty: "",
            },
            rules: {
                nameCn: [{required: true, trigger: 'blur', message: "请输入中文名称"}],
                name: [{
                    required: true,
                    trigger: 'blur',
                    message: "请输入编码标识"
                }, {pattern: '^[A-Za-z][A-Za-z0-9_]{1,29}$', message: '请输入正确编码标识'}],
                describeCn: [{required: true, trigger: 'blur', message: "请输入中文描述"}],
            },

            dialogType: "add"
        }
    },
    computed: {
        disabled() {
            return this.dialogType === "view"
        }
    },
    methods: {
        save() {
            this.$refs["form"].validate(f => {
                if (f) {
                    let method = this.dialogType !== "add" ? "update" : "save"
                    api[method](this.formData).then(() => {
                        this.$message.success("保存成功");
                        this.$emit('removeThisTabs');
                        this.$emit('refresh');
                    })
                }
            })
        },
        open() {
            this.dialogType = "add";
        },
        view(row) {
            this.dialogType = "view";

            this.getDetails(row)
        },
        edit(row) {
            this.dialogType = "edit";
            api.checkout({id: row.oid}).then((res) => {
                this.$emit('refresh');
                this.formData = res.data.data;
            })
        },
        getDetails(row) {
            api.getDetail({oid: row.oid}).then(res => {
                this.formData = res.data.data;
            })
        }
    }
}
</script>
<style scoped lang="scss">
.config {
  height: 200px;

  .el-col {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 36px;
    line-height: 36px;
    font-size: 12px;

    > span {
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: right;
      padding-right: 10px;
      font-size: 12px;
    }

    .l4 {
      width: 100px;
    }
  }
}
</style>
